<template>
	<view class="topNav" :style="{'background-color': nav.bg}" >
		<view class="bigBox">
			<view class="header"
				:style="{'height':titleBarHeight,'padding-top':statusBarHeight,'background-color': nav.bg}">
				<!-- 正常显示 第一种顶部展示-->
				<view class="top-boxA" v-if="!indexScrollTopFlag">
					<view class="top-title">
						<!-- 返回按钮 -->
						<uni-icons v-if="backFlag" class="back-home" @click="topBack()" type="back" size="24"
							color="#fff"></uni-icons>
						<view v-if="backFlag" class="title">页头标题</view>
					</view>
				</view>
				<!-- 上滑一定距离显示 第二种顶部展示-->
				<view class="top-boxB" v-else>
					<!-- 标题 -->
					<view class="top-title">
						<!-- 返回按钮 -->
						<uni-icons v-if="backFlag" class="back-home" @click="topBack()" type="back" size="24"
							color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['shopDetail', "nav", 'shopId', 'distance', 'focusShopF', 'indexScrollTopFlag'],
		components: {
			
		},
		data() {
			return {
				userId: null,
				statusBarHeight: 0,
				titleBarHeight: 0,
				showKefu: false,
				addrModel: false,
				showListFlag: undefined,
				startX: 0,
				startY: 0,
				backFlag: false
			}
		},
		watch: {},
		computed: {},
		created() {
			var that = this;
			// 根据设备给予顶部不同高度
			uni.getSystemInfo({
				success: function(res) {
					if (res.model.indexOf('iPhone') !== -1) {
						that.titleBarHeight = 12 + 'vh';
					} else {
						that.titleBarHeight = 11 + 'vh';
					}
					that.statusBarHeight = res.statusBarHeight + 10 + 'px'
				}
			})
		},
		onShow() {},
		methods: {
			topBack() { 
				this.$emit("topBack") //index页面返回函数
			},
		}
	}
</script>
 
<style lang="scss" scoped>
	// 顶部
	.bigBox {
		position: fixed;
		width: 100%;
		z-index: 3;
 
		.top-boxA {
			width: 100%;
			text-align: center;
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
			color: #fff;
			font-size: 32rpx;
 
			.top-title {
				position: relative;
 
				.back-home {
					position: absolute;
					top: 0rpx;
					left: 16rpx;
				}
			}
		}
 
		.top-boxB {
			width: 100%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #fff;
			font-size: 32rpx;
			margin-top: -16rpx;
 
			.top-title {
				display: flex;
				position: relative;
 
				.back-home {
					position: absolute;
					top: 6rpx;
					left: 16rpx;
				}
 
				.input {
					margin-left: 80rpx;
					text-align: left;
					border: none;
					outline: none;
					font-size: 26upx;
					padding-left: 10rpx;
					color: #999999;
					width: 324rpx;
					height: 72rpx;
					line-height: 72upx;
					background: #FFFFFF;
					border-radius: 88rpx;
				}
 
				.icons {
					margin-top: 10rpx;
					width: 100rpx;
					display: flex;
 
					view {
						width: 64rpx;
						margin-left: 10rpx;
					}
 
					image {
						width: 64rpx;
					}
				}
			}
		}
	}
 
	// 输入框
	.inputCon {
		width: 702upx;
		margin: 0 auto;
		padding: 0 20upx;
		box-sizing: border-box;
		border: 2upx solid #DDDDDD;
		border-radius: 35upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		position: relative;
 
		.inputConText {
			font-size: 32upx;
			flex-shrink: 0;
			color: #999999;
		}
 
		.input {
			width: 686rpx;
			height: 70rpx;
			text-align: left;
			border: none;
			outline: none;
			font-size: 26upx;
			padding-left: 6%;
			color: #999999;
			height: 70upx;
			line-height: 70upx;
		}
 
		.grey {
			color: #999999;
			font-size: 26upx;
		}
 
		.inputErweima {
			width: 50rpx;
			height: 50rpx;
			display: block;
			position: absolute;
			top: 8rpx;
			right: 16rpx;
			background-size: 50rpx 50rpx;
			background-repeat: no-repeat;
			z-index: 20;
		}
	}
 
	// 信息
	.shop-Box {
		width: 100%;
		height: 286rpx;
		padding: 32rpx 16rpx;
		margin-top: 38rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
 
		.shop-Box-info {
			display: flex;
 
			.shop-logo {
				image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 50rpx;
				}
			}
 
			.shop-right {
				width: 566rpx;
				padding-left: 16rpx;
 
				.shop-right-top {
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					display: flex;
					justify-content: space-between;
					align-items: center;
 
					.shop-icon {
						display: flex;
 
						image {
							width: 52rpx;
							height: 52rpx;
							margin-right: 8rpx;
							margin-left: 8rpx;
						}
					}
				}
 
				.shop-address {
					width: 100%;
					height: 40rpx;
					margin-top: 24rpx;
					font-size: 28rpx;
					color: #333333;
					display: flex;
 
					.shop-address-name {
						display: inline-block;
						width: 146rpx;
						height: 100%;
					}
 
					.shop-address-details {
						width: 424rpx;
						height: 100%;
						display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>